<template>
  <div class="contents">
    <PanelTitle title="品种分布" />

    <div class="mt">
      <div class="more">
        <div :class="curChose == 0 ? 'active' : ''" @click="curChose = 0">
          批次列表
        </div>
        <div :class="curChose == 1 ? 'active' : ''" @click="curChose = 1">
          农事列表
        </div>
      </div>

      <div v-if="curChose == 0">
        <div class="tr">
          <div class="th" style="width: 25%;">种植批次</div>
          <div class="th" style="width: 25%;">所在地块</div>
          <div class="th" style="width: 25%;">种植品种</div>
          <div class="th" style="width: 25%;">所在阶段</div>
        </div>

        <loopScroll class="scroll-table">
          <div class="tr" v-for="item in taskList">
            <div class="td" style="width: 25%;">{{ item.batchNo }}</div>
            <div class="td" style="width: 25%;">{{ item.landName }}</div>
            <div class="td" style="width: 25%;">{{ item.medicinalName }}</div>
            <div class="td" style="width: 25%;">
              <label v-if="item.taskStatus == 1">未开始</label>
              <label v-if="item.taskStatus == 2">执行中</label>
              <label v-if="item.taskStatus == 3">已完成</label>
            </div>
          </div>
        </loopScroll>

      </div>
      <div v-else>
        <div class="tr">
          <div class="th" style="width: 25%;">任务编号</div>
          <div class="th" style="width: 25%;">所在地块</div>
          <div class="th" style="width: 25%;">负责人</div>
          <div class="th" style="width: 25%;">完成状态</div>
        </div>

        <loopScroll class="scroll-table">
          <div class="tr" v-for="item in taskList">
            <div class="td" style="width: 25%;">{{ item.id }}</div>
            <div class="td" style="width: 25%;">{{ item.landName }}</div>
            <div class="td" style="width: 25%;">{{ item.leader }}</div>
            <div class="td" style="width: 25%;">
              <label v-if="item.taskStatus == 1">未开始</label>
              <label v-if="item.taskStatus == 2">执行中</label>
              <label v-if="item.taskStatus == 3">已完成</label>
            </div>
          </div>
        </loopScroll>

      </div>


    </div>
  </div>
</template>

<script setup>
import loopScroll from "@/components/loopScroll.vue";
import { onMounted, ref, watch } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { useBaseStore } from "@/stores/base";
const baseStore = useBaseStore()

let curChose = ref(0);

let taskList = ref([]);

onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/plant/task/list",
    method: "get",
    params: { baseId: baseStore.base.id },
  });

  taskList.value = res.data;
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-30);
    height: 22vh;
  
  }
}

.more {
  width: vw(122);
  display: flex;
  align-content: center;
  justify-content: flex-end;
  border-radius: vh(5);
  overflow: hidden;
  border: vh(1) solid #19f7ff;
  margin: 0 vw(10) vw(10) vw(10);

  >div {
    width: 50%;
    text-align: center;
    padding: vh(4) 0;
    font-size: vh(10);
    color: #32c8a7;
    cursor: pointer;
  }

  .active {
    color: #fff !important;
    background-color: #32c8a7;
  }
}

.scroll-table {
  height: 15vh;
  overflow-y: hidden;
}

.tr {
  display: flex;
}

.th {
  color: #fff;
  background: linear-gradient(to bottom,
      rgba(50, 200, 167, 0.45),
      rgba(50, 200, 167, 0.05));
  font-size: vh(10);
  padding: vh(6) 0;
  text-align: center;
  box-sizing: border-box;
  border-left: vh(1) solid #2cd7bc;
  border-bottom: vh(1) solid #2cd7bc;
  border-top: vh(1) solid #2cd7bc;
}

.tr .th:last-child {
  border-right: vh(1) solid #2cd7bc;
}

.tr .td:last-child {
  border-right: vh(1) solid #2cd7bc;
}

.td {
  font-size: vh(9);
  color: #fff;
  border-left: vh(1) solid #2cd7bc;
  border-bottom: vh(1) solid #2cd7bc;
  padding: vh(4) 0;
  text-align: center;
  box-sizing: border-box;
}
</style>